import {
	Button,
	Card,
	CardActions,
	CardContent,
	Typography
} from '@mui/material'
import { Eye } from 'lucide-react'
import Link from 'next/link'

import { type IRequest, requestStatuses } from '@/types/request.types'

import { DASHBOARD_PAGES } from '@/config/pages-url.config'

export function RequestMinCard({
	request_data
}: {
	request_data: IRequest | undefined
}) {
	return (
		<Card variant='outlined'>
			<CardContent>
				<Typography
					variant='h5'
					component='div'
				>
					Заявка #{request_data?.id}
				</Typography>
				<Typography
					sx={{ mb: 1.5 }}
					color='text.secondary'
				>
					Идентификатор в системе #{request_data?.id}
				</Typography>
				<Typography variant='body2'>
					<b>Имя: </b>
					{request_data?.first_name}
				</Typography>
				<Typography variant='body2'>
					<b>Телефон: </b>
					{request_data?.phone_number}
				</Typography>
				<Typography variant='body2'>
					<b>Статус: </b>
					{request_data?.status && requestStatuses[request_data?.status]}
				</Typography>
				<Typography variant='body2'>
					<b>Заметка: </b>
					{request_data?.note ? request_data?.note : '-'}
				</Typography>
			</CardContent>
			<CardActions>
				<Link href={`${DASHBOARD_PAGES.REQUEST}/${request_data?.id}`}>
					<Button
						size='small'
						startIcon={<Eye size={20} />}
					>
						Подробнее
					</Button>
				</Link>
			</CardActions>
		</Card>
	)
}
